<template>
	<view class="container">
		<view class="title">
			充值金额
		</view>
		<view class="money">
			<view class="money_and_tip">
				<text class="money_tip">￥</text>
				<text class="recharge_money"></text>
				<input type="number" class="recharge_money" placeholder-style="color:#CCCCCC;font-size:32rpx" placeholder="请输入充值金额" value="" v-model="rechargeMoney" />
			</view>
			<image src="../../static/img/cancel.png" mode="" class="cancel" @click="rechargeMoney=''"></image>
		</view>
		<view class="gray_line">
			请选择付款方式
		</view>
		<view class="pay_part">
			<view class="pay_type" v-for="(item,index) in payMethods" :key="index">
				<view class="pay_left">
					<image :src="item.img" mode="" class="image"></image>
					<view class="">
						<view class="">
							{{item.name}}
						</view>
						<view class="tip">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="">
					<label class="radio"><radio value="r1" :checked="item.isChecked" /></label>
				</view>
			</view>
		</view>
		<view  class="go_rob" @click="confirmBtn">确认支付</view>
	</view>
</template>

<script>
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
		components:{
			HandleBtn
		},
		data() {
			return {
				rechargeMoney: "",
				payMethods:[
					{img:"../../static/img/weixin.png",name:"微信支付",title:"通过微信立即支付，方便快捷",isChecked:true},
					// {img:"../../static/img/alipay.png",name:"支付宝支付",title:"推荐有支付宝账号的用户使用",isChecked:false},
				]
			}
		},
		methods: {
			confirmBtn(){
				let _this = this
				this.$utils.requert({ url: 'wxPay', data: { money: Number(this.rechargeMoney) }, type: 'post' }).then(datas => {
					
					uni.requestPayment({
							provider:'wxpay',
							orderInfo: datas, //微信、支付宝订单数据
							success: function (succ) {
								console.log('success:' + succ);
								uni.navigateBack({
									delta:1
								})
							},
							fail: function (err) {
									console.log('fail:' + JSON.stringify(err));	
							}
					});
					
				});
			},

		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		font-size: 30rpx;
		color: #333333;
		padding:38rpx 0;
		box-sizing: border-box;
	}
	.title ,.money{
		padding:0 24rpx;
		box-sizing: border-box;
	}
     .money_and_tip{
		 display: flex;
		 align-items: center;
	 }
	.title,.money_tip{
		font-size: 33rpx;
		font-weight: bold;
	}
	.recharge_money{
		font-size: 55rpx;
		font-weight: bold;
		margin-left:10rpx
	}
	.money{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 52rpx;
		margin-bottom: 27rpx;
	}
	.cancel{
		width: 22rpx;
		height: 22rpx;
	}
	.gray_line{
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #f5f4f6;
		padding-left: 24rpx;
		}
	.pay_part{
		margin:0 24rpx;
	}	
	.pay_part .pay_type{
		padding:28rpx 0;
		border-bottom:1rpx solid #f6f6f6;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pay_part .image{
		width: 76rpx;
		height: 76rpx;
		margin-right: 18rpx;
	}
	.pay_left{
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}
	.pay_left .tip{
		font-size: 24rpx;
		color:#949492;
	}
	.pay_btn{
		width: 590rpx;
		height: 110rpx;
		margin:0 auto;
		line-height: 117rpx;
		text-align: center;
		font-size: 34rpx;
		color:#fff;
		background-color: #FFA008;
		border-radius: 140rpx;
		margin-top:300rpx;
		
	}
	.container >>> .uni-radio-input-checked{
		background-color: #FFA008 !important;
		border:none !important
		}
		
</style>
